<template>
  <div class="view-box" id="view-box">
      <router-view/>
  </div>
</template>

<script>

  import { debounce } from '../../static/js/debounce'
  import $ from 'jquery'
  import Router from 'vue-router'

  export default {
    name: 'viewBox',
    data () {
      return {}
    },
    watch: { '$route': function(to,from){
        // console.log(to)
        // console.log(from)
        const view_box = document.getElementById('view-box')
        view_box.scrollTop = 0
      }},
    created () {},
    mounted () {
      // const view_box = document.getElementById('view-box')
      // view_box.addEventListener('scroll', this.scrollTop)
    },


    // created () {
    //   this.$watch('text', debounce((newValue, oldValue) => {
    //     console.log(newValue)
    //   }, 300))
    // }
  }

</script>

<style lang="less">
  .view-box{
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    height: calc(100vh - 50px);
    display: flex;
    position: relative;
    /*overflow: hidden;*/
    /*background-color: red;*/
    /*align-items: center;*/
  }

  /*滚动条样式*/
  .view-box::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
    /*background-color: #a46eff;*/
    background-color: transparent;
  }
  .view-box::-webkit-scrollbar-thumb {

    border-radius: 50px;
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background-color: var(--theme-button);
  }
  .view-box::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    /*border-radius: 0;*/
    /*background: rgba(0,0,0,0.1);*/
  }
</style>
